<template>
  <div>
    <el-collapse value="common">
      <el-collapse-item title="公共配置" name="common">
        <!--公共属性-->
        <div class="pad-lft-rgt-10">
          <div class="flex-com mar-btm">
            <span class="label-title">宽度</span>
            <el-input-number v-model="widget.UI.data.itemSize.width" placeholder="宽度" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">高度</span>
            <el-input-number v-model="widget.UI.data.itemSize.height" placeholder="高度" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <div class="flex-com mar-btm">
            <span class="label-title">文字大小</span>
            <el-input-number v-model="widget.UI.data.textSize" placeholder="文字大小" size="mini"
                             class="width-100"></el-input-number>
          </div>
          <el-row :gutter="10" :span="12">
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">背景颜色</span>
                <PopoverColor :colorValue="widget.UI.data.itemBackColor">
                  <CustomColorPicker v-model="widget.UI.data.itemBackColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">文字颜色</span>
                <PopoverColor :colorValue="widget.UI.data.itemTextColor">
                  <CustomColorPicker v-model="widget.UI.data.itemTextColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中背景颜色</span>
                <PopoverColor :colorValue="widget.UI.data.activeItemBackColor">
                  <CustomColorPicker v-model="widget.UI.data.activeItemBackColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="flex-com mar-btm">
                <span class="label-title">选中文字颜色</span>
                <PopoverColor :colorValue="widget.UI.data.activeItemTextColor">
                  <CustomColorPicker v-model="widget.UI.data.activeItemTextColor" show-alpha></CustomColorPicker>
                </PopoverColor>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import {PadRelatedRooms} from "@/modules/IDE/widget/custom/padRelatedRooms";
  import PopoverColor from '@/components/IDE/colorPicker/Popovers.vue';
  import CustomColorPicker from "@/components/IDE/colorPicker/Color.vue";

  export default {
    name: 'PadRelatedRooms',
    props: {
      widget: {
        type: PadRelatedRooms,
        default: () => {
          return {};
        }
      }
    },
    components: {
      CustomColorPicker, PopoverColor
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      }
    }
  };
</script>

<style lang="less" scoped>
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
